<template>
  <view class="page">
    <comHead :datas="datasObj"></comHead>
    <view class="content_box pd-30" :class="{ hiddenIndex: isHiddenIndex }" style="border-radius: 40rpx 40rpx 0 0;">
      <!-- 热门 -->
      <view class="tips_box1 pd-20 bd-r40">
        <view class="title ft1">
          <view class="ft1 wen">#热门点击#</view>
          <view class="engText ft-eng ft-44 ">Hot Clicks</view>
        </view>
        <view class="card_box mt-20">
          <view class="card_box_item bd-r20" v-for="item in productTagLis.slice(0, 6)" :key="item.id"
            @click="goPage('/subpackage/clinch/tipSearch?tigId=' + item.id)">
            <view class="top flex-bwt">
              <view class="flex-center">
                <image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/fire2.png" mode="scaleToFill" />
                <text class="ft-24 c-33">#{{ item.name }}</text>
              </view>
              <text class="ft-22 c-66">{{ item.view_num + '人浏览' }}</text>
            </view>
            <view class="msg te-1 ft-24 c-66">{{ item.des }}</view>
          </view>
        </view>
      </view>
      <!-- 列表 -->
      <view class="list_box bd-r40 mt-30 pd-20">
        <view class="title ft1">
          <view class="ft1 wen">#标签列表#</view>
          <view class="engText ft-eng">Tag list</view>
        </view>
        <view class="list mt-30">
          <comLoadMord v-if="Object.keys(dataList).length > 0" :dataList='dataList' :pageInfo='pageInfo'
            @getDatas="getProductTagListFun">
            <view class="list_item bd-r40" v-for="item in productTagLis.slice(0, 6)" :key="item.id"
              @click="goPage('/subpackage/clinch/tipSearch?tigId=' + item.id)">
              <view class="list_item_title ft1 flex-bwt">
                <view class="ft1 wen">#{{ item.name }}</view>
                <view class="ft-24 c-66 fw-400 flex">
                  <!-- <view class="userGroup">
                    <image class="imgs bd-r50c" v-for="i in item.view_list" :src="i.avatar" mode="aspectFill"></image>
                  </view> -->
                  <avtorGroup v-if="item.view_list?.length > 0" :avatars="item.view_list.map(f => f.avatar)" size="38">
                  </avtorGroup>
                  <text class="ml-4">

                    {{ item.view_num + '人浏览' }}
                  </text>
                </view>
              </view>
              <view class="list_item_msg ft-24 c-66 bd-r20 te-1">{{ '投资移民是个人通过在目标国家进行一定规模的投...' }}</view>
              <view class="list_item_msg ft-24 c-66 bd-r20 te-1 mt-20">
                <image class="wh-24" style="flex-shrink: 0;"
                  src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon6.png"></image>
                关联：{{ item.relate_txt }}
              </view>
              <view class="demo_box flex mt-20">
                <image class="imgs bd-r20" v-for="i in item.product_list" style="flex-shrink: 0;" :src="i.cover"
                  mode="aspectFill"></image>
              </view>
            </view>
          </comLoadMord>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="js">
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import comHead from '@/components/comHead.vue';
import comLoadMord from '@/components/comLoadMord.vue'
import { reactive, ref } from "vue";
import avtorGroup from "@/components/avtorGroup.vue";

let datasObj = reactive({
  title: '标签搜产品',
  img: 'https://cdn.oss.bon-top.cn/static_bc/images/tip_banner.png',
  color: '#DBF046',
  backColor: 'white',//返回按钮颜色，默认黑色
  ftColor: '#fff',
  direction: '',
  scrollTop: 0,
  isBorder: false,
  height: '496rpx',
  backisImg: true,//导航文字模块的背景图
  headerisImg: true,//整个huader模块的背景图
  fullImag: true,//header是否显示完整的图片
  imgHeight: 560
})
let pageInfo = reactive({
  currentPage: 1,
  pageSize: 10
})
// 标签
const dataList = ref({})
const productTagLis = ref([])
const getProductTagListFun = () => {
  utils.request(api.getProductTagList
    , {}, 'get').then((res) => {
      if (res.code === 200) {
        dataList.value = res.data
        dataList.value.noDataType = 0
        dataList.value.listIsShow = false
        productTagLis.value = res.data.items
        productTagLis.value = [...productTagLis.value, ...dataList.value?.items]
        if (!productTagLis.value.length) return
        dataList.value.listIsShow = true

      }
    })
}
const goPage = (url) => {
  uni.navigateTo({ url: url })
}
onLoad(() => {
  getProductTagListFun()
})

const isHiddenIndex = ref(false)

onPageScroll((e) => {
  const scrollTop = e.scrollTop; // 获取滚动距离
  // console.log('滚动距离', e.detail)
  // 优化监听事件 防止毫秒级触发
  datasObj.direction = (scrollTop > datasObj.scrollTop) ? 'down' : 'up'
  if (scrollTop > 10 && datasObj.direction == 'down' && datasObj.backisImg) {
    datasObj.color = '#FFFFFF'
    datasObj.backisImg = false
    datasObj.scrollTop = scrollTop
    // console.log('我是向下滑动')
    datasObj.backColor = ''
    datasObj.ftColor = '#333333'
    isHiddenIndex.value = true
  } else if (scrollTop < 5 && datasObj.direction == 'up' && !datasObj.backisImg) {
    datasObj.color = '#DBF046'
    datasObj.backisImg = true
    datasObj.scrollTop = scrollTop
    // console.log('我是向上滑动^^^')
    isHiddenIndex.value = false
  } else if (scrollTop < 5 && datasObj.direction == 'up') {
    datasObj.backColor = 'white'
    datasObj.ftColor = '#FFFFFF'
  }
})
</script>

<style lang="scss" scoped>
.content_box {
  background-color: #fff;
  position: relative;
  margin-top: -70rpx;
  z-index: 999;

  .title {
    // width: 314rpx;
    height: 44rpx;
    position: relative;


    .wen {
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      z-index: 18;
      font-size: 32rpx;
    }

    .engText {
      position: absolute;
      top: 14rpx;
      left: 0rpx;
      font-size: 44rpx;
      line-height: 44rpx;
    }
  }

  .tips_box1 {
    background: linear-gradient(to bottom, #FFF3EC, #F8F8F8);


  }

  .card_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    /* 允许子项换行 */
    .icons {
      width: 28rpx;
      height: 28rpx;
    }

    &_item {
      width: calc(50% - 10rpx);
      background-color: #fff;
      box-sizing: border-box;
      flex-shrink: 1;
      padding: 20rpx;
      margin-bottom: 20rpx;

      .top {
        // width: 20%;
      }

      .msg {
        // width: 20%;
      }

    }
  }

  .list_box {
    background-color: #F8F8F8;

    .list {

      .list_item {
        background-color: #fff;
        padding: 20rpx;
        margin-bottom: 20rpx;


        &_title {
          padding: 0 0 20rpx;

        }

        &_msg {
          padding: 20rpx;
          background-color: #F8F8F8;
          box-sizing: border-box;
        }

        .demo_box {

          .imgs {
            width: 106rpx;
            height: 136rpx;
            margin-right: 20rpx;

          }
        }
      }
    }
  }
}

.content_box.hiddenIndex {
  z-index: 0;
}

.userGroup {
  position: relative;
  width: 85rpx;
  height: 40rpx;
  // background-color: red;

  .imgs {
    width: 38rpx;
    height: 38rpx;
    position: absolute;

  }


  .imgs:first-child {
    z-index: 3;
  }

  .imgs:nth-of-type(2) {
    left: 20rpx;
    z-index: 2;

  }

  .imgs:last-child {
    left: 40rpx;
    z-index: 1;

  }
}
</style>
